<template>
	<view>
		<view class="" style="color: red;background-color: #fff88e;padding: 10rpx;text-align: center;font-size: 26rpx;">
			请仔细核对您的信息
		</view>
		<view class="" style="width: 90%;margin: 0px auto;margin-top: 40rpx;">
			<view class="fl" style="justify-content: space-between;align-items: center;">
				<view class="fl" style="width: 40%;">
					<view class="">
						<image :src="url+imglist[4]" mode="" class="tb"></image>
					</view>
					<view class="title" style="">
						患者手机号：
					</view>
				</view>
				<view class="" style="width: 60%;">
					<input type="text" v-model="form_info.usertel" placeholder="请输入手机号" />
				</view>
			</view>
			<view class="xian"></view>

			<view class="fl" style="justify-content: space-between;align-items: center;">
				<view class="fl" style="width: 40%;">
					<view class="">
						<image :src="url+imglist[1]" mode="" class="tb"></image>
					</view>
					<view class="title" style="">
						患者姓名：
					</view>
				</view>
				<view class="" style="width: 60%;">
					<input type="text" v-model="form_info.username" placeholder="请输入患者真实姓名" />
				</view>
			</view>
			<view class="xian"></view>
			<view class="fl" style="justify-content: space-between;align-items: center;">
				<view class="fl" style="width: 40%;">
					<view class="">
						<image :src="url+imglist[0]" mode="" class="tb"></image>
					</view>
					<view class="title" style="">
						患者性别：
					</view>
				</view>
				<view class="" style="width: 60%;">
					<radio-group @change="radioChange">
						<label class="radio">
							<radio value="1" :checked="form_info.gender == 1" /> <text
								style="margin-left: 10rpx;">男</text>
						</label>
						<label class="radio" style="margin-left: 10rpx;">
							<radio value="2" :checked="form_info.gender == 2" /> <text
								style="margin-left: 10rpx;">女</text>
						</label>
					</radio-group>
					<!-- <input type="text" placeholder="请输入手机号" /> -->
				</view>
			</view>
			<view class="xian"></view>
			<view class="fl" style="justify-content: space-between;align-items: center;">
				<view class="fl" style="width: 40%;">
					<view class="">
						<image :src="url+imglist[2]" mode="" class="tb"></image>
					</view>
					<view class="title" style="">
						患者年龄：
					</view>
				</view>
				<view class="" style="width: 60%;">
					<input type="text" v-model="form_info.age" placeholder="请输入患者年龄" />
				</view>
			</view>
			<!-- <view class="xian"></view> -->
		</view>

		<!-- 选择项目 -->

		<view class="" style="display: flex;background-color:#f9f9f9;height:1000rpx;margin-top: 50rpx;">
			<!-- 左侧导航 -->
			<view class="" style="width: 250rpx;background: #e6e6e6;">
				<scroll-view style="height: 762rpx;" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
					@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
					<view :class="nav_index == index ? 'choice' : 'left-item'" v-for="(item,index) in nav_list"
						@click="navchange(index)">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<!-- 右侧产品 -->
			<view class="" style="width: 100%;">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					style="height:800rpx" @scrolltolower="lower">
					<view class="proitem cc" v-for="(item,index) in drug_list">
						<view class="" style="display: flex;flex-direction: column;">
							<view class="" style="font-weight: bold;">
								{{item.name}}
							</view>
							<view class="">
								<view class="bt">
									<view class="">
										检测样本
									</view>
									<view class="">
										{{item.sample}}
									</view>
								</view>
							</view>
							<view class="">
								<view class="bt">
									<view class="text-ellipsis-2">
										{{item.significance}}
									</view>

								</view>
							</view>
							<view class="" style="color: #6d6d6d;font-size: 26rpx;margin-top: 15rpx;">
								库存：{{item.stock}}
							</view>
							<view class="">

								<view class="bt">
									<view class="" style="color: red;font-size: 30rpx;">
										价格：￥{{item.price}}
									</view>

									<view class="" style="display: flex;">
										<view class="jj" @click="jia(index,2)">
											-
										</view>
										<view class="jj">
											{{item.nums}}
										</view>
										<view class="jj" @click="jia(index,1)">
											+
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>


				</scroll-view>
			</view>
		</view>

		<view class="sub_box" v-if="identity == 4">
			<button v-if="is_login == 0" class="sub_btn2" open-type="getPhoneNumber"
				@getphonenumber="hz_getphonenumber">
				登录
			</button>
			<view v-if="is_login == 1" class="sub_btn" @click="sub">
				提交
			</view>
		</view>

		<view class="sub_box" v-if="identity == 5">
			<view class="sub_btn" @click="sub">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	var md5 = require('../../components/md5.js')
	export default {
		data() {
			return {
				url: this.global.url,
				imglist: [
					'wechatimg/xb.png',
					'wechatimg/xm.png',
					'wechatimg/nl.png',
					'wechatimg/yh.png',
					'wechatimg/sj.png',
				],
				nav_index: 0,
				nav_id: '',
				nav_list: [

				],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				drug_list: [],
				form_info: {
					username: '',
					usertel: '',
					age: '',
					gender: 1,
					device_id: ''
				},
				hz_userinfo: {}, // 患者登录信息
				identity: 4, // 4为患者
				is_login: 0,
				choice_id: [], // 已经选择的下单id
			}
		},
		onShow() {

		},
		onLoad(options) {
			console.log(options)
			if (options.scene) {
				this.form_info.device_id = options.scene
				// 扫码设备编号，根据这个这个设备进行支付
				console.log('已经设置了', this.form_info.device_id)
			}
			console.log(options)
			console.log(uni.getStorageSync('hz_userinfo'))
			if (options.identity && options.identity == 5) {
				// 医生代下单
				this.identity = 5
			} else {
				let userinfo = uni.getStorageSync('hz_userinfo')
				if (!userinfo) {
					this.is_login = 0
					// uni.navigateTo({
					// 	url:'/pages/login/login'
					// })
				} else {
					this.is_login = 1
				}
			}
			uni.$on('payresult', function(res) {
				console.log('收到消息')
				if (res.referrerInfo && res.referrerInfo.extraData) {
					// 用户点击【返回】按钮时可以收到的通知参数
					if (res.referrerInfo.extraData.payStatus === '0') {
						// 支付失败
						// ......
						console.log('支付失败')
					}
					if (res.referrerInfo.extraData.payStatus === '1') {
						// 支付成功
						// ......
						console.log('支付成功')

						uni.redirectTo({
							url: '/pages/checkorder/myorder'
						})
					}
					if (res.referrerInfo.extraData.payStatus === '3') {
						// 用户取消支付
						// ......
						console.log('取消支付')
					}
				} else {
					// 不是通过点击【返回】按钮关闭半屏小程序时，可以通过场景值来判断是否是从另一个小程序返回的
					if (res.scene === 1038) {
						// 从另一个小程序返回
						// ......
					}
				}
			})

			this.get_ficlist()
		},
		methods: {
			// 患者端登录，获取手机号码
			hz_getphonenumber(e) {
				console.log(e)
				var that = this
				uni.showLoading({
					title: '加载中...'
				})
				uni.login({
					success: function(loginRes) {
						uni.request({
							url: that.global.url + 'api/user/hz_login',
							method: 'POST',
							data: {
								code: e.detail.code,
								openidcode: loginRes.code
							},
							success(res) {
								let result = res.data
								console.log(result)
								// return false;
								if (result.code == 1) {
									// 存用户信息
									uni.setStorageSync('hz_userinfo', result.data.userinfo)
									// 存用户信息
									uni.setStorageSync('hz_token', result.data.userinfo.token)

									var params = that.form_info
									if (params.username == '' && !/^1\d{10}$/.test(params.usertel) &&
										params.age == '' && params.gender == '') {
										that.is_login = 1
									} else {
										that.is_login = 1
										that.sub()
									}
								} else {
									uni.showToast({
										title: result.msg,
										icon: 'none'
									})
								}
							},
							complete() {
								uni.hideLoading()
							}
						})
					}
				});
			},
			getuserinfo() {
				var that = this
				uni.request({
					url: that.global.url + 'api/user/hz_center',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('hz_token')
					},
					data: {

					},
					success(res) {
						let result = res.data
						console.log('获取的用户信息')
						console.log(result)
						if (result.code == 1) {
							// 存同步姓名等信息
							// that.datalist = result.data
							that.form_info.username = result.data.nickname
							that.form_info.usertel = result.data.mobile
							that.form_info.age = result.data.age
							that.form_info.gender = result.data.gender
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					complete() {
						// uni.hideLoading()
					}
				})
			},
			radioChange(e) {
				console.log(e)
				this.form_info.gender = e.detail.value
			},
			sub() {
				var params = this.form_info
				if (params.username == '') {
					return uni.showToast({
						title: '请输入姓名',
						icon: 'error'
					})
				}
				if (!/^1\d{10}$/.test(params.usertel)) {
					return uni.showToast({
						title: '手机号码错误',
						icon: 'error'
					})
				}
				if (params.age == '') {
					return uni.showToast({
						title: '请输入年龄',
						icon: 'error'
					})
				}
				if (params.gender == '') {
					return uni.showToast({
						title: '请选择性别',
						icon: 'error'
					})
				}
				var that = this
				var price = 0;
				var drug_idlist = []
				for (var i = 0; i < that.drug_list.length; i++) {
					let result = that.drug_list[i]

					if (result.nums > 0) {

						price += parseFloat(result.price).toFixed(2)
						drug_idlist.push(result.id)
					}
				}
				if (drug_idlist.length == 0) {
					return uni.showToast({
						title: '请选择检测项目',
						icon: 'error'
					})
				}

				// 下单
				wx.login({
					success: function(res) {
						if (res.code) {
							var code = res.code; //获取到用户的code，准备发送给后端服务器
							console.log('登录code', code)
							uni.request({
								url: that.global.url + 'api/device/add_payuser',
								method: 'POST',
								data: {
									code: code
								},
								success(res) {

									let result = res.data
									console.log('已经返回了啊', result)
									console.log(result)
									if (result.code == 1) {
										// 存用户信息
										uni.setStorageSync('payuserinfo', result.data)
										that.add_order()
									} else {
										uni.showToast({
											title: result.msg,
											icon: 'none'
										})
									}
								},
								complete() {
									// uni.hideLoading()
								}
							})
							// 将code发送给后端服务器，后端服务器使用code去微信服务器换取openid
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					},
					fail(err) {
						console.log('失败了？', err)
					}
				});

			},


			add_order() {
				var that = this
				// 重算支付金额，支付id
				var price = 0
				if (this.choice_id.length == 0) {
					return uni.showToast({
						title: '请选择检测项目'
					})
				}
				let payuser = uni.getStorageSync('payuserinfo')
				var params = {
					device_id: that.form_info.device_id,
					idlist: that.choice_id.join(','),
					payuser_id: payuser.id,
					paymoney: price,
					type: 2,
					username: this.form_info.username,
					usertel: this.form_info.usertel,
					age: this.form_info.age,
					gender: this.form_info.gender,
					identity: this.identity,
				}


				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: this.global.url + 'api/device/add_order_new_v',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('hz_token')
					},
					data: params,
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							console.log(result)
							// console.log( result.data.payinfo.respData.path)
							console.log(result.data.payinfo.code)
							if (that.identity == 4) {
								// 用户直接支付
								if (result.data.payinfo.code == 1001) {
									uni.redirectTo({
										url: '/pages/checkorder/myorder'
									})
								} else {
									that.pay_order(result.data.payinfo.data);
								}
							} else {
								// 医生跳转我的订单
								uni.navigateTo({
									url: '/pages/checkorder/clinicorder'
								})
							}
							// if (result.data.payinfo.code == 1001) {
							// 	uni.reLaunch({
							// 		url: '/pages/device/payok' // 假设你想跳转到的页面路径是 /pages/index/index
							// 	});
							// } else if (result.data.payinfo.code == '0000') {
							// 	wx.openEmbeddedMiniProgram({
							// 		appId: "wx30dff80de3fb2e0a",
							// 		path: result.data.payinfo.respData.path,
							// 		envVersion: 'release',
							// 		success(res) {
							// 			// 打开成功
							// 			console.log(res);
							// 		},fail(err){
							// 			if(that.identity == 4){
							// 				uni.navigateTo({
							// 					url: '/pages/checkorder/myorder'
							// 				})
							// 			}

							// 		}

							// 	})
							// } else {
							// 	// 跳转到我的订单
							// 	uni.showToast({
							// 		title: result.msg,
							// 		icon: 'error'
							// 	})
							// 	if(that.identity == 4){
							// 		setTimeout(() => {
							// 			uni.navigateTo({
							// 				url: '/pages/checkorder/myorder'
							// 			})
							// 		}, 1000)
							// 	}

							// }


						} else if (result.code == 1001) {
							// 直接支付成功
							uni.navigateTo({
								url: '/pages/device/payok'
							})
						} else {
							uni.showModal({
								title: '提示',
								content: result.msg,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										// 执行确认后的操作
									} else {
										// 执行取消后的操作
									}
								}
							})
							// uni.showToast({
							// 	title: result.msg,
							// 	icon: 'error'
							// })
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			pay_order(id) {
				let that = this
				console.log('请求的status', that.nav_index)
				uni.showLoading({
					title: "加载中"
				})
				uni.request({
					url: that.global.url + 'api/device/order_pay_sxf',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('hz_token')
					},
					data: {
						id: id,
						identity: 4
					},
					success(res) {
						let result = res.data

						console.log(result)
						if (result.code == 1) {

							wx.openEmbeddedMiniProgram({
								appId: "wx652466ba7957d4fc",
								path: result.data.respData.path,
								envVersion: 'release',
								success(res) {
									// 打开成功
									console.log(res);
								}

							})
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})

						}

					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			jia(index, type) {
				// if(this.drug_list[index]['stock'] <= 0){
				// 	return uni.showToast({
				// 		title:'库存不足',
				// 		icon:'error'
				// 	})
				// }
				if (type == 1) {
					if (this.drug_list[index]['nums'] >= 1) {
						return false;
					}
					this.drug_list[index]['nums']++
					this.choice_id = this.choice_id.concat(this.drug_list[index].id)
				} else {
					if (this.drug_list[index]['nums'] <= 0) {
						return false;
					}
					let all_id = this.choice_id
					this.drug_list[index]['nums']--
					// 存在则移除
					for (var i = 0; i < all_id.length; i++) {
						if (all_id[i] === this.drug_list[index].id) {
							// 存在则移除
							all_id.splice(i, 1)
							console.log('移除了' + this.drug_list[index].id)
							console.log(all_id)
						} // 返回true或false
					}
					this.choice_id = all_id
				}
				console.log(this.choice_id)
			},
			navchange(index) {
				this.nav_index = index
				this.nav_id = this.nav_list[index]['id']
				this.get_data()
			},

			get_data() {
				console.log('获取详细内容')
				var that = this
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: that.global.url + 'api/device/device_drug',
					method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						ficid: that.nav_id,
						clinic_id: uni.getStorageSync('clinic_id'),
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							let data = result.data
							for (var i = 0; i < data.length; i++) {
								if (that.choice_id.includes(data[i].id)) {
									// 存在则增加数量
									data[i].nums = 1
								} // 返回true或false
							}
							that.drug_list = data

						} else {
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},

			get_ficlist() {
				var that = this
				uni.request({
					url: that.global.url + 'api/device/devicefic_list',
					method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.nav_list = result.data
							if (result.data.length > 0) {
								that.nav_id = result.data[0]['id']
								that.get_data()
							}
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.fl {
		display: flex;
	}

	.tb {
		width: 38rpx;
		height: 40rpx
	}

	.xian {
		border-bottom: 1px solid #e5e5e5;
		width: 100%;
		margin-top: 25rpx;
		margin-bottom: 25rpx;
	}

	.title {
		margin-left: 20rpx;
		width: 300rpx;
		font-weight: bold
	}

	.left-item {
		width: 100%;
		height: 50px;
		background: #e5e5e5;
		text-align: center;
		line-height: 50px;
	}

	.choice {
		width: 100%;
		height: 50px;
		background: #fff;
		text-align: center;
		line-height: 50px;
	}

	.cc {
		width: 82%;
		margin: 0px auto;
		margin-top: 20rpx;
		padding: 21rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
		box-shadow: 1px 1px 4px 1px #ccc;
	}

	.bt {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #b5b5b5;
		margin-top: 10rpx;
	}

	.jj {
		padding: 5rpx 15rpx;
		font-size: 30rpx;
		color: #000;
		background-color: #e5e5e5;
		margin: 0px 3px 0px 3px;

	}

	.sub_box {
		background-color: #fff;
		position: fixed;
		bottom: 0px;
		height: 150rpx;
		left: 0px;
		right: 0px;
		border-top: 1px solid #ccc;
	}

	.sub_btn {
		background-color: #00c500;
		color: #fff;
		width: 90%;
		margin: 0px auto;
		padding: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		margin-top: 20rpx
	}

	.sub_btn2 {
		background-color: #00c500;
		color: #fff;
		width: 90%;
		margin: 0px auto;
		text-align: center;
		margin-top: 20rpx;
		padding: 0rpx;
	}

	.text-ellipsis-2 {
		display: -webkit-box;
		/* 使用Webkit的盒子模型 */
		-webkit-line-clamp: 2;
		/* 限制最多显示2行 */
		-webkit-box-orient: vertical;
		/* 设置盒子内容的排列方向为垂直 */
		overflow: hidden;
		/* 隐藏超出容器的内容 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
	}
</style>